<template>
  <div class="time-quantum-item">
    <el-date-picker
      v-model="daterange"
      type="daterange"
      range-separator="-"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      @change="dateChange"
    />
    &nbsp;
    &nbsp;
    <el-icon class="del-icon" @click="del" v-if="props.isDel"><Delete /></el-icon>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, watch, computed, nextTick, onMounted } from 'vue'

  let daterange = ref<any[]>([])

  type Props = {
    modelValue: Array<string>|any,
    isDel: boolean
  }
  const props = withDefaults(defineProps<Props>(), {
    modelValue: [],
    isDel: false
  })

  const emit = defineEmits(['update:modelValue', 'change', 'del'])

  const dateChange = (val:any)=>{
    emit('update:modelValue', formatDate(val))
    emit('change', true)
  }

  const formatDate = (arr:any)=>{
    return arr.map((date:Date)=>{
      const dat = new Date(date)
      let year = dat.getFullYear()
      let month:number|string = dat.getMonth() + 1
      let day:number|string = dat.getDate()
      month = month > 9 ? `${month}` : `0${month}`
      day = day > 9 ? `${day}` : `0${day}`
      return `${year}-${month}-${day}`
    })
  }

  const del = ()=>{
    emit('del', true)
  }

  const init = ()=>{
    if(!!props.modelValue.length){
      daterange.value[0] = props.modelValue[0]
      daterange.value[1] = props.modelValue[1]
    }
  }

  onMounted(()=>{
    init()
  })

</script>
<style scoped lang="scss">
  .time-quantum-item{
    display: flex;
    align-items: center;
    width: 400px;
    .del-icon{
      font-size: 18px;
      color: #999;
      &:hover{
        cursor: pointer;
        color: #FF6B00;
      }
    }
  }
</style>
